<template>
  <a-modal
    :width="800"
    v-model:visible="modalVisible"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title> 指标库 </template>
    <a-table
      :data="tableData"
      row-key="id"
      stripe
      :row-selection="rowSelection"
      v-model:selectedKeys="selectedKeys"
      :pagination="false"
    >
      <template #columns>
        <a-table-column :width="70">
          <template #title> 序号 </template>
          <template #cell="{ rowIndex }">
            {{ rowIndex + 1 }}
          </template>
        </a-table-column>
        <a-table-column :width="200" data-index="name" title="指标名称">
        </a-table-column>
        <a-table-column :width="200" data-index="definition" title="指标定义">
        </a-table-column>
        <a-table-column :width="200" data-index="define" title="项目界定">
        </a-table-column>
        <a-table-column :width="200" data-index="rule" title="评分标准/准则">
        </a-table-column>
        <a-table-column
          :width="200"
          data-index="assessmentTargetValue"
          title="考核目标值"
        >
          <template #cell="{ record }">
            {{
              record.assessmentTargetValue
                ? `${record.assessmentTargetValue}${record.assessmentTargetUnit}`
                : '--'
            }}
          </template>
        </a-table-column>
        <a-table-column :width="200" data-index="scoreType" title="评分方式">
          <template #cell="{ record }">
            <span v-if="record.scoreType">
              {{ record.scoreType === 1 ? '选项否决' : '输入扣分' }}
            </span>
            <span v-else> -- </span>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </a-modal>
</template>
<script setup lang="ts">
import { useVModel } from '@vueuse/core';
import { GetVetolIndexList } from '@/apis/management/performance/baseSetting/template/index';
const props = withDefaults(
  defineProps<{
    visible: boolean;
  }>(),
  {
    visible: false
  }
);

const emits = defineEmits(['update:visible', 'addIndex', 'exist']);
const modalVisible = useVModel(props, 'visible', emits);
const params = reactive({ source: 0, name: '' });
const tableData = ref<any[]>([]);
const getTableData = async () => {
  const res = await GetVetolIndexList(params);
  tableData.value = res.content;
};
const rowSelection = reactive({
  type: 'checkbox',
  showCheckedAll: true,
  onlyCurrent: false
});
const selectedKeys = ref([]);
watch(
  () => modalVisible.value,
  (val) => {
    if (val) {
      selectedKeys.value = [];
      getTableData();
    }
  }
);
const handleClick = () => {
  modalVisible.value = true;
};
const handleOk = () => {
  let quoteData: any[] = [];
  if (selectedKeys.value.length) {
    selectedKeys.value.forEach((key) => {
      let indexItem = tableData.value.find((item) => item.id === key);
      if (!indexItem) return;
      quoteData.push({ ...indexItem, id: void 0 });
    });
  }
  emits('addIndex', quoteData);

  modalVisible.value = false;
};
const handleCancel = () => {
  modalVisible.value = false;
};
</script>
<style lang="less" scoped>
:deep(.arco-table-th),
:deep(.arco-table-td) {
  height: 30px;
}
</style>
